<template>
  <div class="detail">
      <Top :title="title" :showBack="true" :showSearch="true"></Top>
      <div class="swp">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#288692">
                <van-swipe-item v-for="item in data.img" :key="item._id">
                    <img :src="item.url" alt="" srcset="">
                </van-swipe-item>
            </van-swipe>
      </div>
      <van-sticky :offset-top="150">
            <van-button type="warning" @click="contact">联系我~</van-button>
        </van-sticky>
      <div class="content">
        <p class="price"> &yen; {{data.retailPrice}}</p>
        <van-cell-group>
            <van-cell :value="data.name" />
            <van-cell title="品牌" :value="data.brand" />
            <van-cell title="京东价格" v-if="data.JDprice" :value="data.JDprice" />
            <van-cell title="淘宝价格" v-if="data.TMprice" :value="data.TMprice" />
            <van-cell title="单位" :value="data.unit" />
            <van-cell title="分类" :value="data.classify" />
            <van-cell title="介绍" :value="data.intro" />
            <van-cell title="来源" is-link :url="data.referenceURL" />
        </van-cell-group>
        <p class="tags">
            <van-tag v-for="(item, index) in data.tag" :key="index" size="medium" type="primary">{{item}}</van-tag>
        </p>
        <p class="bottom-img">
            <img v-for="item in data.img" :key="item._id" :src="item.url" alt="" srcset="">
        </p>
      </div>
  </div>
</template>

<script>
import { getById } from '../utils/api/goods'
import Top from '../components/top'
export default {
    components: {
        Top
    },
    data () {
        return {
            title: '商品详情',
            showBack: false,
            id: '',
            data: [],
            // container: null
        }
    },
    created() {
        this.id = this.$route.params.id
        this.getData(this.id)
    },
    mounted() {
        // this.container = this.$refs.container;
    },
    methods: {
        async getData (id) {
            let res = await getById(id)
            this.data = res.data.data
        },
        contact() {
             this.$router.push({
                path: '/addMe'
            })
        }
    }
}
</script>

<style lang="less" scoped>
@themeColor: #45BE93;
@borderColor: #FAF6EE;
/deep/.van-nav-bar__text,
/deep/ .van-nav-bar .van-icon {
    color: @themeColor;
}
    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        height: 300px;
        text-align: center;
        background-color: #fff;
        img {
            height: 100%;
        }
  }
  .content {
      margin-top: 20px;
    //   box-sizing: border-box;
    //   padding: 20px;
      .price { 
        height: 60px;
        width: 100%;
        background-color: @themeColor;
        margin-top: -20px;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        text-indent: 30px;
        color: #fff;
        font-weight: bolder;
        line-height: 60px;
        font-size: 20px;
      }
      .van-cell__title {
          color: @themeColor;
      }
      .van-cell__value {
          text-align: left;
          color: #000;
      }
      .tags {
          box-sizing: border-box;
          padding: 10px 20px;
          .van-tag {
              margin-right: 10px;
          }
          .van-tag--primary {
              background-color: @themeColor;
          }
        //   margin-top: 10px;
      }
      .bottom-img {
          box-sizing: border-box;
          padding: 10px 20px;
          img {
              width: 100%;
              margin-bottom: 4px;
          }
      }
  }
</style>